{% extends 'base.html' %}

{% block left %}
    <div class="left">
        <ul>
            {% for category in categorys %}
                {% if category.nickname == categoryactive %}
                    <li class="active"><a href="/category/{{ category.nickname }}">{{ category.name }}</a></li>
                {% else %}
                    <li><a href="/category/{{ category.nickname }}">{{ category.name }}</a></li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
    <div class="mobilenav">
        <ul>
            {% for category in categorys %}
                {% if category.nickname == categoryactive %}
                    <li class="active"><a href="/category/{{ category.nickname }}">{{ category.name }}</a></li>
                {% else %}
                    <li><a href="/category/{{ category.nickname }}">{{ category.name }}</a></li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
{% endblock %}

{% block publish %}
    {% if authorid %}
        {% if errmsg_center %}
            <span class="errmsg">{{ errmsg_center }}</span><br/><br/>
        {% endif %}
        <div class="publish hiddenpublish">
            <a class="pselect" href="javascript:void(0);">[ 发布 ]</a>
        </div>
        <div class="publish">
            <a class="phselect" href="javascript:void(0);">[ 隐藏 ]</a>
            <form action="/publish/" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <ul>
                    <li>
                        <span>分类：</span>
                        <select name="category">
                            {% for category in categorys %}
                                <option value="{{ category.nickname }}">{{ category.name }}</option>
                            {% endfor %}
                        </select>
                    </li>
                    <li>
                        <span>标题：</span>
                        <input type="text" maxlength="50" name="title" placeholder="留空"/>
                    </li>
                    <li>
                        <span class="content">内容：</span>
                        <textarea name="body" maxlength="10000" placeholder="请输入内容"
                                  required="required"></textarea>
                    </li>
                    <li>
                        <span>图片：</span>
                        <input name="attachment" accept="image/*" type="file" value="上传图片"/>
                    </li>
                    <li>
                        <span>音乐：</span>
                        <input class="pmusic" name="musicurl" type="text" placeholder="留空"/>
                    </li>
                    <li>
                        <span>发布：</span>
                        <input type="hidden" name="authorid" value="{{ authorid }}"/>
                        <input class="submitbtn" type="submit" value="发布线程"/>
                    </li>
                </ul>
            </form>
        </div>
    {% endif %}
{% endblock %}

{% block threads %}
    {% if not threads %}
        <span>这里还空空如也呢~</span>
    {% endif %}
    {% for thread in threads %}
        <div class="item item_index">
            <div class="avator">
                <img src="{{ thread.author.avator }}"/>
            </div>
            <div class="item_right">
                <div class="item_title"><a
                        href="/category/{{ thread.category.nickname }}/thread/{{ thread.id }}">{{ thread.title }}</a>
                </div>
                <div class="item_author"><span>{{ thread.author.username }} | {{ thread.category.name }}</span>&nbsp;&nbsp;</div>
                <div class="item_publish"><span>{{ thread.createtime }}</span></div>
            </div>
            <div class="item_comment">
                <span>{{ thread.commentnum }}</span>
            </div>
        </div>
    {% endfor %}

    {% if threads.has_previous %}
        <div class="pagebtn">
            {% if threads.has_previous %}
                <button><a href="/category/{{ categoryactive }}/page/{{ threads.previous_page_number }}">上一页</a>
                </button>
            {% endif %}
            {% if threads.has_next %}
                <button><a
                        href="/category/{{ categoryactive }}/page/{{ threads.next_page_number }}">下一页</a></button>
            {% endif %}
        </div>
    {% else %}
        {% if threads.paginator.num_pages > 1 %}
            <div class="pagebtn">
                <button><a href="/category/{{ categoryactive }}/page/2">下一页</a></button>
            </div>
        {% endif %}
    {% endif %}
{% endblock %}

{% block siderbar %}
    <div class="sidebar">
        {% if authorid %}
            <div>
                <span>欢迎您！{{ username }}</span><br/>
                <div class="joinandlogin"><a href="/logout/">退出</a></div>
            </div>
        {% else %}
            {% if errmsg_sider %}
                <span class="errmsg">{{ errmsg_sider }}</span>
            {% endif %}
            <div class="login">
                <div>
                    <form action="/register/" method="post">
                        {% csrf_token %}
                        <ul>
                            <li><input class="l1" type="text" maxlength="14" name="username" placeholder="请输入用户名"
                                       required="required">
                            </li>
                            <li><input class="l1" type="email" name="email" placeholder="请输入邮箱"
                                       required="required">
                            </li>
                            <li><input class="l1" type="password" maxlength="14" name="password" placeholder="请输入密码"
                                       required="required">
                            </li>
                            <li><input class="l2" type="submit" value="注册 （￣▽￣） "></li>
                        </ul>
                    </form>
                </div>
                <div class="unload">
                    <span>已有账号？</span><br/>
                    <button id="logn" class="joinandlogin">登录 (ノ≧∇≦)ノ</button>
                </div>
            </div>

            <div class="register">
                <div>
                    <form action="/login/" method="post">
                        {% csrf_token %}
                        <ul>
                            <li><input class="l1" type="text" maxlength="14" name="username" placeholder="请输入用户名"
                                       required="required">
                            </li>
                            <li><input class="l1" type="password" maxlength="14" name="password" placeholder="请输入密码"
                                       required="required">
                            </li>
                            <li><input class="l2" type="submit" value="登录 （￣▽￣） "></li>
                        </ul>
                    </form>
                </div>
                <div class="unload">
                    <span>还没有注册？</span><br/>
                    <button id="join" class="joinandlogin">加入我们 (ノ≧∇≦)ノ</button>
                </div>
            </div>
        {% endif %}
        <br/><span>本站建于2019/4/4<br/><br/>有以下规则：<br/>别搞破坏<br/>别发黄图<br/>勿聊政治<br/><br/>提示：<br/>发表主题可以只填写内容<br/>头像默认采用gravatar<br/>发布文章会由于缓存而延迟几秒</span>
        <div class="search">
            <span>试一下搜索功能？搜10条</span><br/>
            <form action="/search/" method="post">
                {% csrf_token %}
                <ul>
                    <li>
                        <input class="l1" type="text" name="keyword" placeholder="请输入关键字" required="required"/>
                    </li>
                </ul>
            </form>
        </div>
        {% if errmsg_keyword %}
            <span>{{ errmsg_keyword }}</span>
        {% endif %}
        <div class="search photo">
            <span>试一下搜图功能？</span><br/>
            <form action="" method="post" id="imgkeyform" enctype="multipart/form-data">
                {% csrf_token %}
                <ul>
                    <li>
                        <input class="l1" accept="image/*" type="file" name="imgkey" onchange="submitform()"/>
                    </li>
                </ul>
            </form>
        </div>
        <div class="imgkeyresult">
            <span class="imgkeyt"></span><br/><br/>
            <span style="word-break: break-all;" class="imgkeycontent"></span>
        </div>
    </div>
{% endblock %}